<template>
  <el-dialog v-model="dialogVisible" append-to-body title="核对" width="540">
    <div class="form-box">
      <el-form v-if="dialogVisible" label-width="100px" :model="formObj" ref="formRef" :rules="rules" size="large">
        <el-form-item label="用户ID" prop="user_id">
          <el-input v-model="formObj.user_id" type="text" disabled autocomplete="off" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="代理类型" prop="proxy_type">
          <el-select v-model="formObj.proxy_type" disabled filterable clearable placeholder="请选择代理类型">
            <el-option label="动态类型" :value="1" />
            <el-option label="静态类型" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="套餐类型" prop="goods_info">
          <el-input v-model="formObj.goods_info" type="text" disabled autocomplete="off" placeholder="请输入套餐类型" />
        </el-form-item>
        <div v-if="formObj.proxy_type == 1" key="proxy_type-1">
          <el-form-item label="充值流量" prop="quantity" key="quantity-1">
            <el-input v-model.number="formObj.quantity" type="number" disabled autocomplete="off" placeholder="请输入充值流量">
              <template #prepend>G</template>
            </el-input>
          </el-form-item>
        </div>
        <div v-else-if="formObj.proxy_type == 2" key="proxy_type-2">
          <el-form-item label="购买数量" prop="quantity" key="quantity-2" @change="onCalculatePrice">
            <el-input v-model.number="formObj.quantity" disabled type="number" :min="1" autocomplete="off" placeholder="请输入购买数量" />
          </el-form-item>
        </div>
        <el-form-item label="支付金额" prop="amount">
          <el-input v-model.number="formObj.amount" type="number" disabled autocomplete="off" placeholder="请输入支付金额">
            <template #prepend>$</template>
          </el-input>
        </el-form-item>
        <el-form-item label="支付方式" prop="pay_way">
          <el-select v-model="formObj.pay_way" disabled filterable clearable placeholder="请选择支付方式">
            <el-option label="USDT" value="USDT" />
            <el-option label="支付宝" value="alipay" />
            <el-option label="其它" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注说明" prop="remark">
          <el-input v-model="formObj.remark" type="textarea" autocomplete="off" placeholder="请输入备注说明" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="text-align: center">
        <el-button size="large" @click="onClose()">取消</el-button>
        <el-button type="primary" size="large" :disabled="loading" :loading="loading" @click="onSubmit(formRef)">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { manageOrderVerifyApi } from '@/api/index';
  import type { FormInstance, FormRules } from 'element-plus';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const emits = defineEmits<{
    (event: 'confirm'): void;
  }>();

  const loading = ref(false);
  const formRef = ref<FormInstance>();
  const formObj = reactive({
    user_id: '',
    proxy_type: '',
    goods_info: '',
    quantity: '',
    amount: '',
    pay_way: '',
    order_nu: '',
    remark: '',
  });

  const dialogVisible = ref(false);

  const rules = reactive<FormRules>({
    user_id: [{ required: true, message: '请输入用户ID', trigger: 'change' }],
    proxy_type: [{ required: true, message: '请选择代理类型', trigger: 'change' }],
    goods_info: [{ required: true, message: '请输入套餐类型', trigger: 'change' }],
    quantity: [{ required: true, message: '请输入充值流量', trigger: 'change' }],
    amount: [{ required: true, message: '请输入支付金额', trigger: 'change' }],
    pay_way: [{ required: true, message: '请选择支付方式', trigger: 'blur' }],
    // remark: [{ required: true, message: '请输入备注说明', trigger: 'blur' }],
  });

  const onOpen = (data) => {
    dialogVisible.value = true;
    // Object.formObj(reactive, data);
    formObj.user_id = data.user_id;
    formObj.proxy_type = data.proxy_type;
    formObj.goods_info = data.goods_info;
    formObj.quantity = data.quantity;
    formObj.amount = data.amount;
    formObj.pay_way = data.pay_way;
    formObj.order_nu = data.order_nu;
    formObj.remark = '';
  };

  const onClose = () => {
    dialogVisible.value = false;
  };

  const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        onSubmitFn();
      }
    });
  };

  const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };

  const onSubmitFn = async () => {
    if (loading.value) return false;
    loading.value = true;
    manageOrderVerifyApi(formObj)
      .then((res) => {
        loading.value = false;
        if (res.errcode == 0) {
          ElMessage.success(res.message || res.errmsg);
          emits('confirm', 'check');
          onClose();
        } else {
          ElMessage.error(res.message || res.errmsg);
        }
      })
      .catch((err) => {
        console.log('err', err);
        loading.value = false;
        ElMessage.error(err.message);
      });
  };

  defineExpose({
    onOpen,
  });

  onMounted(() => {});
</script>

<style scoped lang="scss">
  .form-box {
    padding: 10px 20px 0 0;
  }
</style>
